<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.js"></script>
    <script src="js/public.js"></script>
    <title>云中宝</title>
</head>

<body>
<div class="wrapper">
<div class="header">
    <ul class='clearfix'>
        <li class="header_btn_wrapper float_l"><a href="javascript:goHistory()" class="header_btn"><img src="images/return_icon.png" alt=""></a></li>
        <li class="header_btn_wrapper float_r"><a href="javascript:goHome()" class="header_btn"><img src="images/home_icon.png" alt=""></a></li>
        <li class="header_title_wrapper">个人基本信息</li>
    </ul> 
</div>
<div class="main pd10">  
    <form action="" class="intro_form">
    <div class="rows intro">
        <div class="cols12">
           <div class="intro_head">
               <img src="images/head/2.jpg" width="100%" alt="">               
           </div>
           <p class="intro_txt">更换个人头像</p>
        </div>
    </div>
    <div class="form_item intro_name">
        <span class="form_label" for="">姓名：</span>
        <input class="form_input w_10 hidden intro_form" id="name" name="name" type="text" placeholder="" value="张三">
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">张三</span>  
        </div>       
    </div>
    <div class="form_item intro_sex">
        <span class="form_label" for="">性别：</span></span>
        <div class="form_input_wrapper w_10 hidden">
            <label for="" class="form_radio w_5">
                <input class="intro_form" name="sex" type="radio" style="margin-right:5px;" value="男">男  
            </label>
            <label for="" class="form_radio w_5 intro_form">
                <input class="intro_form" name="sex" type="radio" style="margin-right:5px;" value="女">女  
            </label>
        </div>
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">女</span>  
        </div>           
    </div>
    <div class="form_item intro_id">
        <span class="form_label" for="">身份证号：</span></span>
        <input class="form_input w_10 hidden intro_form" id="new_pass2" type="text" placeholder="" value='2301198910230987'>
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">2301198910230987</span>  
        </div>        
    </div>
    <div class="form_item intro_livearea">
        <span class="form_label" for="">现居住地址：</span></span>
        <div class="form_input_wrapper w_10 hidden">
            <div class="intro_liveProvince">
                <select name="" id="liveProvince" class="form_select float_l w_4_7 intro_form">
                    <option value="" >-省份-</option>
                </select> 
            </div>
            <div class="intro_liveCity">
                <select name="" id="liveCity" class="form_select float_l w_4_7 intro_form" style="margin-left:6%">
                    <option value="" >-城市-</option>
                </select> 
            </div>
        </div>
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt"><span class="txt_liveProvince">北京市</span> <span class="txt_liveCity">海淀区</span></span>  
        </div>        
    </div>
    <div class="form_item intro_liveAddress">
        <span class="form_label" for=""></span></span>
        <div class="form_input_wrapper w_10 hidden">
            <textarea name="" id="" class="form_textarea w_10 intro_form">五棵松体育馆</textarea>
        </div>
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">五棵松体育馆</span>  
        </div>        
    </div> 
    <div class="form_item intro_domicilearea">
        <span class="form_label" for="">户籍地址：</span></span>
        <div class="form_input_wrapper w_10 hidden">
            <div class="intro_domicileProvince">
                <select name="" id="domicileProvince" class="form_select float_l w_4_7 intro_form">
                    <option value="" >-省份-</option>
                </select> 
            </div>
            <div class="intro_domicileProvince">
                <select name="" id="domicileCity" class="form_select float_l w_4_7 intro_form" style="margin-left:6%">
                    <option value="" >-城市-</option>
                </select> 
            </div>
        </div>
        <div class="form_input_wrapper w_10">
           <span class="form_text form_txt"><span class="txt_domicileProvince">北京市</span> <span class="txt_domicileCity">海淀区</span></span>  
        </div>        
    </div>
    <div class="form_item intro_domicileAddress">
        <span class="form_label" for=""></span></span>
        <div class="form_input_wrapper w_10 hidden">
            <textarea name="" id="" class="form_textarea w_10 intro_form">五棵松体育馆</textarea>
        </div>
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">五棵松体育馆</span>  
        </div>        
    </div>
    <div class="form_item intro_phone">
        <span class="form_label" for="">手机：</span></span>
        <input class="form_input w_10 hidden intro_form" type="text" placeholder="">
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">15812345678</span>  
        </div>        
    </div>
    <div class="form_item intro_email">
        <span class="form_label" for="">电子邮箱：</span></span>
        <input class="form_input w_10 hidden intro_form" type="text" placeholder="">
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">15812345678@163.com</span>  
        </div>        
    </div>
    <div class="form_item intro_spe">
        <span class="form_label" for="">紧急联系人：</span></span>
        <input class="form_input w_10 hidden intro_form" type="text" placeholder="">
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">李四</span>  
        </div>        
    </div>
    <div class="form_item intro_spe_phone">
        <span class="form_label" for="">联系人电话：</span></span>
        <input class="form_input w_10 hidden intro_form" type="text" placeholder="">
        <div class="form_input_wrapper w_10">
           <span class="form_text intro_txt">15112345678</span>  
        </div>        
    </div>
    <div class="intro_btn_group">
        <a class="btn btn_green w_10 form_change" onclick="check()" href="javascript:void(0)">修 改</a>
        <div class="intro_edit hidden clearfix">
            <a class="btn bg_green w_10 form_ok float_l w_5" onclick="check()" href="javascript:void(0)">确 定</a>
            <a class="btn bg_gray w_10 form_cancel float_l w_5" onclick="check()" href="javascript:void(0)">取 消</a>
        </div>
                
    </div>
    </form>
    <div class="select_head pd10">
        <div class="rows">
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/1.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/2.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/3.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/4.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/5.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/6.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/7.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/8.jpg" alt="">
                </div> 
            </div>

        </div>
        <div class="intro_btn_group">
            <a href="javascript:void(0)" class="btn head_select_ok">确 定</a>    
        </div>
        
    </div>
    
</div> 
</div>
<div class="footer">
    <ul class="toolbar">
        <li class="account active"><a href="index.html"><p>我的账户</p></a></li>
        <li class="transact"><a href="transact.html"><p>我要办理</p></a></li>
        <li class="info"><a href="info.html"><p>服务信息</p></a></li>
        <li class="setting"><a href="setting.html"><p>个人设置</p></a></li>
    </ul>
</div>
</div>
<script src="js/city.js"></script>
<script type="text/javascript">
$(function(){

    
var liveProvince = document.getElementById('liveProvince') 
var liveCity = document.getElementById('liveCity')
var domicileProvince = document.getElementById('domicileProvince') 
var domicileCity = document.getElementById('domicileCity') 
addprovince(liveProvince)
addprovince(domicileProvince)
liveProvince.onchange=function(){
    selectchange(this,liveCity)
}
domicileProvince.onchange=function(){
    selectchange(this,domicileCity)
}
window.check=function(){
}
var h = $(window).height();
for(var i=0,len=$('.head_elm').length;i<len;i++){
    var _src = $($('.head_elm img')[i]).attr('src')
    var _accSrc =  $('.intro_head img').attr('src');
    if(_src == _accSrc){
        $($('.head_elm')[i]).addClass('active')
    }
}
$('.select_head').css('height',h-218+'px')
$('.intro_head').bind('click',function(){
    $('.select_head').hasClass('active')?$('.select_head').removeClass('active'):$('.select_head').addClass('active');
})
$('.head_elm').bind('click',function(){
    if($(this).hasClass('active')){
//        $(this).removeClass('active')
    }else{
        $(this).addClass('active').parent().siblings('div').find('.head_elm').removeClass('active');
    }
})
$('.head_select_ok').bind('click',function(){
    var _parent = $(this).parent().parent();
    var _src = _parent.find('.head_elm.active img').attr('src');
    _parent.removeClass('active')
    $('.intro_head img').attr('src',_src)
})

var formInfo={
    name:'张三',
    sex:'女',
    id:'2301198910230987',
    liveProvince:'北京',
    liveCity:'北京市',
    address:'五棵松体育馆',
    domicileProvince:'北京',
    domicileCity:'北京市',
    domicileaddress:'五棵松体育馆',
    phone:'15812345678',
    email:'15812345678@163.com',
    spe:'李四',
    spePhone:'15112345678'
}    
    
    
$('.form_change').bind('click',function(){    
    $('form .form_item>.hidden').removeClass('hidden')
    $('form .form_item>*:last-child').addClass('hidden')
    $('.intro_edit').removeClass('hidden');
    $(this).addClass('hidden')
    
    $('.intro_name').find('.intro_form').val(formInfo.name)//姓名
    $('.intro_sex').find('.intro_form[value ='+formInfo.sex+']').attr('checked',true)//性别
    $('.intro_id').find('.intro_form').val(formInfo.id)//身份证
    $('.intro_livearea .intro_liveProvince').find('.intro_form option[value='+formInfo.liveProvince+']').attr('selected',true)//居住省
    liveProvince.onchange();//居住省
    $('.intro_livearea .intro_liveCity').find('.intro_form option[value='+formInfo.liveCity+']').attr('selected',true)//居住市
    $('.intro_livearea .intro_liveAddress').find('.intro_form').html(formInfo.address)//居住详细地址
    $('.intro_domicilearea .intro_domicileProvince').find('.intro_form option[value='+formInfo.domicileProvince+']').attr('selected',true)//户籍省   
    domicileProvince.onchange();//户籍省
    $('.intro_domicilearea .intro_domicileCity').find('.intro_form option[value='+formInfo.domicileCity+']').attr('selected',true)//户籍市
    $('.intro_domicilearea .intro_domicileAddress').find('.intro_form').html(formInfo.domicileaddress)//户籍详细地址
    $('.intro_phone').find('.intro_form').val(formInfo.phone)//电话
    $('.intro_email').find('.intro_form').val(formInfo.email)//邮箱
    $('.intro_spe').find('.intro_form').val(formInfo.spe)//紧急联系人
    $('.intro_spe_phone').find('.intro_form').val(formInfo.spePhone)//联系人电话
})
$('.form_cancel').bind('click',function(){    
    $('form .form_item>.hidden').removeClass('hidden')
    $('form .form_item>*:nth-child(2)').addClass('hidden');
    $(this).parent().addClass('hidden').siblings('.form_change').removeClass('hidden')
})
$('.form_ok').bind('click',function(){
    
    formInfo.name = $('.intro_name').find('.intro_form').val();//姓名
    formInfo.sex = $('.intro_sex').find('.intro_form:checked').val();//性别
    formInfo.id = $('.intro_id').find('.intro_form').val();//身份证
    formInfo.liveProvince = $('.intro_liveProvince').find('.intro_form').val();//居住省
    formInfo.liveCity = $('.intro_liveCity').find('.intro_form').val();//居住市
    formInfo.address = $('.intro_liveAddress').find('.intro_form').val();//居住详细地址
    formInfo.domicileProvince = $('.intro_domicileProvince').find('.intro_form').val();//户籍省
    formInfo.domicileCity = $('.intro_domicileCity').find('.intro_form').val();//户籍市
    formInfo.domicileaddress = $('.intro_domicileAddress').find('.intro_form').val();//户籍详细地址
    formInfo.phone = $('.intro_phone').find('.intro_form').val();//电话
    formInfo.email = $('.intro_email').find('.intro_form').val();//邮箱
    formInfo.spe = $('.intro_spe').find('.intro_form').val();//紧急联系人
    formInfo.spePhone = $('.intro_spe_phone').find('.intro_form').val();//联系人电话
    
    $('.intro_name').find('.intro_txt').html(formInfo.name);//姓名
    $('.intro_sex').find('.intro_txt').html(formInfo.sex);//性别
    $('.intro_id').find('.intro_txt').html(formInfo.id);//身份证
    $('.intro_livearea').find('.intro_txt .txt_liveProvince').html(formInfo.liveProvince);//居住省
    $('.intro_livearea').find('.intro_txt .txt_liveCity').html(formInfo.liveCity);//居住市
    $('.intro_liveAddress').find('.intro_txt').html(formInfo.address);//居住详细地址
    $('.intro_domicilearea').find('.intro_txt .txt_domicileProvince').html(formInfo.domicileProvince);//户籍省
    $('.intro_domicilearea').find('.intro_txt .txt_domicileCity').html(formInfo.domicileCity);//户籍市
    $('.intro_domicileAddress').find('.intro_txt').html(formInfo.domicileaddress);//户籍详细地址
    $('.intro_phone').find('.intro_txt').html(formInfo.phone);//电话
    $('.intro_email').find('.intro_txt').html(formInfo.email);//邮箱
    $('.intro_spe').find('.intro_txt').html(formInfo.spe);//紧急联系人
    $('.intro_spe_phone').find('.intro_txt').html(formInfo.spePhone);//联系人电话
    
    $('form .form_item>.hidden').removeClass('hidden')
    $('form .form_item>*:nth-child(2)').addClass('hidden')
    $(this).parent().addClass('hidden').siblings('.form_change').removeClass('hidden')
})
})
</script>   
</body>
</html>